<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>tsinglog - 留言板</title>
  <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="/static/fonts/iconfont.css">
  <link rel="stylesheet" href="/static/lib/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="/static/lib/DCalendar/css/zzsc.css">
  <link rel="stylesheet" href="/static/lib/DCalendar/css/dcalendar.picker.css">
  <link rel="stylesheet" href="/static/lib/wangEditor/css/wangEditor.min.css">
  <link rel="stylesheet" href="/static/css/common/base.css">
  <link rel="stylesheet" href="/static/css/common/layout.css">
  <link rel="stylesheet" href="/static/css/content/notice.css">
  <link rel="stylesheet" href="/static/css/content/modal.css">
  <link rel="stylesheet" href="/static/css/guestBook.css">
</head>
<body>

<!--顶部-->
<div th:replace="layout/header :: header"></div>
<!--内容-->
<div class="content">
  <div class="content-in div-in">
    <div class="container">
      <div class="row">
        <!--内容左侧区域-->
        <div th:replace="layout/left :: left"></div>
        <!--内容中间区域-->
        <div class="col-md-7 col-md-offset-2 content-center">
          <!--公告-->
          <div th:replace="content/notice :: notice"></div>
          <div class="guest-box">
            <!--标题-->
            <div class="box-title">
              <a href="javascript:;">
                留言板<span> / Guest Book</span>
              </a>
            </div>
          </div>
          <div class="guest-book-info">
            <h3>欢迎来到留言板</h3>
            <div class="info-message">
              <div class="info-title">
                <i class="iconfont icon-liaotian1"></i>
                <h4>在这里，期待您：</h4>
              </div>
              <div class="info-content">
                <p>吐槽本博客，吐槽身边各种事</p>
                <p>花式水贴</p>
                <p>等等。。。。。。</p>
              </div>
            </div>
            <div class="warning-message">
              <div class="warning-title">
                <i class="iconfont icon-tixing"></i>
                <h4>在畅所欲言的同时，请您注意：</h4>
              </div>
              <div class="warning-content">
                <p>不要发表反动和反人类的言论</p>
                <p>不要发表政治敏感的言论</p>
                <p>不要发表地域歧视和地域攻击的言论</p>
              </div>

            </div>
          </div>

          <!--留言-->
          <div class="comment-box">

            <!--评论列表-->
            <ul class="comment-list clearfix" th:if="${commentPage eq null}" th:fragment="list_refresh"></ul>
            <ul class="comment-list clearfix" th:if="${commentPage ne null}" th:fragment="list_refresh">
              <li class="comment-item clearfix" th:each="comment:${commentPage.data}" th:cid="${comment.id}">
                <div class="item-top">
                  <img
                    th:src="@{'http://www.tsinglog.online/static/images/avatar/' + ${comment.authorPhoto}}"
                    class="img-circle"/>
                  <div class="info">
                    <div class="name">
                      <i class="iconfont icon-tubiao211"></i>
                      <span th:text="${comment.authorName}"></span>
                    </div>
                    <div class="time">
                      <i class="iconfont icon-shijian"></i>
                      <span th:text="${comment.createTime}"></span>
                      <i class="iconfont icon-weizhi" style="display: inline-block; margin-left: 20px; color: #ccc"></i>
                      <span style="color: #ccc" th:text="${comment.location}"></span>
                    </div>
                  </div>
                </div>
                <div class="item-middle">
                  <div class="quote" th:if="${comment.preCommentId ne null}">
                    <blockquote th:if="${comment.preStatus == 1}">
                      <p th:text="'引用' + ${comment.preFloor} + '楼' + ${comment.preAuthorName}
                          + '于' + ${comment.preCreateTime} + '发表的:'"></p>
                      <p th:utext="${comment.preComment}"></p>
                    </blockquote>
                    <blockquote th:if="${comment.preStatus == 0}">
                      <p>该评论已经被删除</p>
                    </blockquote>
                  </div>
                  <div class="reply">
                    <p th:utext="${comment.commentContent}"></p>
                  </div>
                </div>
                <ul class="viewpoint">
                  <li>
                    <i class="iconfont icon-zhichi"></i>
                    <a href="javascript:;" onclick="supportComment(this)">支持(<b th:text="${comment.supportCount}"></b>)
                    </a>
                  </li>
                  <li>
                    <i class="iconfont icon-fandui"></i>
                    <a href="javascript:;" onclick="opposeComment(this)">反对(<b th:text="${comment.opposeCount}"></b>)
                    </a>
                  </li>
                  <li>
                    <i class="iconfont icon-huifu"></i>
                    <a href="javascript:;" onclick="replyComment(this)">回复</a>
                  </li>
                </ul>
                <span th:name="${comment.floor}" class="floor-num" th:text="${comment.floor} + '#'"></span>
                <span class="admin-common-tag root-tag" th:if="${comment.roleName == '超级管理员'}">超管</span>
                <span class="admin-common-tag admin-tag" th:if="${comment.roleName == '普通管理员'}">普管</span>
              </li>
              <!--分页-->
              <nav aria-label="Page navigation" class="fr" th:if="${commentPage.pageInfo.pages gt 1}">
                <ul class="pagination">
                  <li th:class="${commentPage.pageInfo.pageNum lt 4}? 'disabled': ''">
                    <a href="javascript:;"
                       title="首页"
                       class="iconfont icon-icon_paging_left"></a>
                  </li>
                  <li th:class="${commentPage.pageInfo.isFirstPage}? 'disabled': ''">
                    <a href="javascript:;"
                       title="上一页"
                       class="iconfont icon-fenye1"></a>
                  </li>
                  <li th:each="num:${commentPage.pageInfo.navigatepageNums}"
                      th:class="${commentPage.pageInfo.pageNum == num}? 'active': ''">
                    <a href="javascript:;" th:text="${num}" th:onclick="'getCommentByAid('+${num}+')'"></a>
                  </li>
                  <li th:class="${commentPage.pageInfo.isLastPage}? 'disabled': ''">
                    <a href="javascript:;"
                       title="下一页"
                       class="iconfont icon-fenye"></a>
                  </li>
                  <li th:class="${commentPage.pageInfo.pageNum gt commentPage.pageInfo.pages - 3}? 'disabled': ''">
                    <a href="javascript:;"
                       title="尾页"
                       class="iconfont icon-icon_paging_right"></a>
                  </li>
                </ul>
              </nav>
            </ul>

            <div class="info-input">
              <div class="form-group">
                <label for="name">昵称</label>
                <input type="text" class="form-control input-sm" id="name" placeholder="将输入昵称" maxlength="10">
                <p class="must-mark">*</p>
              </div>
              <div class="form-group">
                <label for="email">邮箱</label>
                <input type="email" class="form-control input-sm" id="email" placeholder="请输入邮箱">
                <p class="must-mark">*</p>
              </div>
            </div>
            <!--评论编辑框-->
            <div class="comment-editor">
              <div id="editor" class="editor"></div>
            </div>
            <button onclick="submitComment()">提交评论</button>
          </div>

        </div>
        <!--内容右侧区域-->
        <div th:replace="layout/right :: right"></div>
      </div>
    </div>

  </div>
</div>
<!--底部-->
<div th:replace="layout/footer :: footer"></div>
<!--提示框-->
<div th:replace="content/modal :: modal"></div>

<script src="../static/lib/jquery/jquery.js"></script>
<script src="../static/lib/bootstrap/js/bootstrap.js"></script>
<script src="../static/lib/DCalendar/js/dcalendar.picker.js"></script>
<script src="../static/lib/wangEditor/js/wangEditor.js"></script>
<script src="../static/js/notice.js"></script>
<script src="../static/js/layout.js"></script>
<script src="../static/js/modal.js"></script>

<script th:inline="javascript">
  // 当前页面
  let currentPage = 0;

  $(function() {
    // 初始化评论框
    initEditor();
    // 获取第一页的留言
    getCommentByAid(1);
  });

  /**
   * 初始化评论框
   */
  function initEditor() {
    editor = new wangEditor('editor');

    editor.config.menus = [
      'source',
      '|',
      'bold',
      'underline',
      'italic',
      'strikethrough',
      'forecolor',
      '|',
      // 'quote',
      'link',
      // 'emotion',
      '|',
      'img',
      'insertcode',
    ];

    editor.create();
  }

  /**
   * 根据页码获取留言的数据
   * @param page 页码
   */
  function getCommentByAid(page) {

    // 点击的页面和当前页面一致时，不进行任何操作
    if (currentPage == page) {
      return;
    }
    currentPage = page;
    $(".comment-list").load("/portal/getGuestBookForPortal?page=" + page);
    setFitHeightForHtml();

  }

  /**
   * 回复评论
   */
  function replyComment(ele) {

    // 跳转到回复编辑框的区域
    $(window).scrollTop($('#editor').offset().top)

    let $li = $(ele).closest(".comment-item");
    // 获取该楼层的楼层号
    let floorNum = parseInt($li.find(".floor-num").text());
    // 获取该楼层的作者
    let author = $li.find(".name span").text();
    // 获取该楼层的评论
    let content = $li.find(".reply p").text();
    editor.$txt.html(`
      <blockquote>
        <p>引用${floorNum}楼${author}的回复</p>
        <p>${content}</p>
      </blockquote>
      <p><br/></p>`);
  }

  /**
   * 支持评论
   * @param ele
   */
  function supportComment(ele) {
    // 获取评论id
    let commentId = $(ele).closest('.comment-item').attr("cid");
    $.get("/portal/supportGuestBook?cid=" + commentId).success(res => {
      if (res.code == 1) {
        // 赋新值
        $(ele).find("b").text(res.data);
      } else {
        openModal(res.message);
      }
    })
  }
  /**
   * 反对评论
   * @param ele
   */
  function opposeComment(ele) {
    // 获取评论id
    let commentId = $(ele).closest('.comment-item').attr("cid");
    $.get("/portal/opposeGuestBook?cid=" + commentId).success(res => {
      if (res.code == 1) {
        // 赋新值
        $(ele).find("b").text(res.data);
      } else {
        openModal(res.message);
      }
    })
  }

  /**
   * 提交评论
   */
  function submitComment() {
    // 1.获取数据
    let name = $(".info-input").find("input[type=text]").val();
    let email = $(".info-input").find("input[type=email]").val();
    let content = editor.$txt.html();

    // 2.校验信息
    if (name == null || name == '') {
      openModal("昵称不能为空！");
      return false;
    }
    if (name.indexOf("root") != -1 || name.indexOf("admin") != -1 || name.indexOf("管理员") != -1) {
      openModal("昵称中包含敏感词汇，请修改后再提交");
      return false;
    }
    if (email == null || email == '') {
      openModal("邮箱不能为空");
      return false;
    }
    let pattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
    if (!pattern.test(email)) {
      openModal("邮箱格式有误");
      return false;
    }

    // 3.如果有引用的信息就获取引用中的楼层信息preFloor
    let indexForBlockquote = content.indexOf("</blockquote>");
    let preFloor = null;
    if (indexForBlockquote != -1) {
      let blockquote = content.substring(0, indexForBlockquote + 1 + 13);
      preFloor = blockquote.substring(blockquote.indexOf("引用") + 2, blockquote.indexOf("楼"));
    }
    content = preFloor? content.substring(indexForBlockquote + 13): content;

    if (content == null || $.trim(content) == '' || $.trim(content) == '<p><br></p>') {
      openModal("评论内容不能为空");
      return false;
    }

    if (content.length >= 500) {
      openModal("评论长度过长，请删减后再提交");
      return false;
    }

    let data = {
      name: name,
      email: email,
      content: content,
      aid: 0,
      preFloor: preFloor
    }

    // 4.发送请求
    $.ajax({
      url: '/portal/submitGuestBook',
      type: 'post',
      data: JSON.stringify(data),
      contentType: 'application/json;charset=UTF-8',
      success(res) {
        if (res.code == 1) {
          openModal("留言成功，请等待审核");
          // 清空输入框的内容
          editor.$txt.html('<p><br></p>');
          $(".info-input").find("input[type=text]").val("");
          $(".info-input").find("input[type=email]").val("");
        } else {
          openModal(res.message);
        }
      }
    });
  }
</script>

</body>
</html>